import React from 'react';
import ReactDOM from 'react-dom';

import Header from './components/Header';
import { List, Switch, Card, WhiteSpace, TabBar, Icon, WingBlank, Button } from 'antd-mobile';
import { createForm } from 'rc-form';
import { Setting } from './components/Setting';
import AutoComplete from './components/AutoComplete';
import Translate from './components/Translate';

import './enroll.css'

import 'whatwg-fetch'


const Item = List.Item;
const Brief = Item.Brief;

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      data: {
        location: '',
        name: '',
        notice: '',
        time: '',
      },
      url: '',
      remind: false,
      loading: true,
      items: [],
      translate: {},
    };
  }

  componentDidMount() {
    this.fetchGet()
  }

  fetchGet() {
    fetch(Setting.BaseUrl + 'enroll-list', {
      credentials: 'include',
      mode: 'cors',
      method: 'get',
    }).then(resp => resp.json()).then(resp => {
      this.setState({ loading: false, items: resp.items, translate: resp.translate });
    });
  }

  handClick = (val) =>{

    fetch( Setting.BaseUrl + 'remind/' + this.props.form.getFieldValue('Switch1') , {
      credentials: 'include',
      method: 'get', 
      headers: {
        // 'Content-Type': 'application/json'
      },
    })
    .then( resp => resp.json() )
    .then( json =>{
        if( json.success ){
          console.log(json)
          this.setState({
            remind:(!this.state.remind)
          },function(){
            console.log(this )
          })
        }
    })

  }

  onDropEnroll(id) {
    location.href = `${Setting.BaseUrl}downloadpdf?id=${id}`;
  }

  render() {
  	const { getFieldProps } = this.props.form;
    const tr = new Translate(this.state.translate);

    return (
    <div className="container" id="container">
      <Header title="录取结果" leftContent="" />
        {this.state.loading ? (
          <div style={{ textAlign: 'center' }}>
            <Icon type="loading" size="lg" />
          </div>
        ) : null}
        {this.state.loading ? null : this.state.items.map((x, i) => (
          <div key={i}>
            <WhiteSpace size="lg" />
            <WingBlank>
              <div class="demoTitle">{`${x.bkyxsmc} ${x.bkzymc} ${tr.getLabel('ksfsm', x.ksfsm)}`}</div>
            </WingBlank>
            <List renderHeader={() => '预录取'} className="my-list">
              <Item extra={'无'}>排名</Item>
            </List>
            <List renderHeader={() => '成绩'} className="my-list">
              {x.km1mc && x.km1cj ? (
              <Item  extra={x.km1cj}>
                {x.km1mc}
              </Item>) : null}
              {x.km2mc && x.km2cj ? (
              <Item  extra={x.km2cj}>
                {x.km2mc}
              </Item>) : null}
              {x.km3mc && x.km3cj ? (
              <Item  extra={x.km3cj}>
                {x.km3mc}
              </Item>) : null}
            </List>
            <WhiteSpace/>
            <WingBlank>
              <Button onClick={() => this.onDropEnroll(x.id)} type="warning">放弃申请</Button>
            </WingBlank>
          </div>
        ))}
    </div>
    );

    return (
    <div className="container" id="container">
    	<Header title="复试资格" leftContent="" />

    	<div className="photo-div">
    		<p>单击图片下载到本地</p>
        <a href={ this.state.url }>
      		<img 
            src={ this.state.data.image ? Setting.BaseUrl +"images/"+ this.state.data.image : ''}
          />
        </a>
    	</div>

    	<List className="my-list">
        	<Item extra={this.state.data.name}>考试名称</Item>
      	</List>

      	<List className="my-list">
        	<Item extra={this.state.data.time}>考试时间</Item>
      	</List>

      	<List className="my-list">
        	<Item extra={this.state.data.location}>考试地点</Item>
      	</List>

	    <Card full>
	      <Card.Header
	        title="考试须知"
	      />
	      <Card.Body>
	        <div>{this.state.data.notice}</div>
	      </Card.Body>
	    </Card>

      	<List>
          <List.Item
            extra={<Switch
              {...getFieldProps('Switch1', {
                initialValue: this.state.remind,
                valuePropName: 'checked',
              })}
            />}
            onChange={ this.handClick }
          >考试前一天微信提醒我</List.Item>
        </List>
    </div>);
  }

}

const RegisterComponent = createForm()(App);


ReactDOM.render(<RegisterComponent />, document.getElementById('example'));
